import './index.css'
import { BillOutline, FaceRecognitionOutline, TeamOutline } from 'antd-mobile-icons'
import { useState } from 'react'

const Footer = () => {
  const [pagesList, setPagesList] = useState([
    {
      name: '首页',
      icon: <FaceRecognitionOutline fontSize={24} />,
    },
    {
      name: '订单',
      icon: <BillOutline fontSize={24} />,
    },
    {
      name: '我的',
      icon: <TeamOutline fontSize={24} />,
    },
  ])
  const [activeIndex, setActiveIndex] = useState(0)

  return (
    <div className="footer">
      {pagesList.map((item, index) => (
        <div
          key={index}
          className={`footer-item ${index === activeIndex ? 'footer-active' : ''}`}
          onClick={() => setActiveIndex(index)}
        >
          <div className="icon">{item.icon}</div>
          <div className="text">{item.name}</div>
        </div>
      ))}
    </div>
  )
}

export default Footer
